<template>
  <div>
    <t-sticky>
      <t-navbar
        title="历史阅读"
        :fixed="true"
        left-arrow
        @left-click="handleBack"
      >
        <template #right>
          <div class="right-txt" @click="isShowDialog = true">清空历史</div>
        </template>
      </t-navbar>
    </t-sticky>
    <div class="warrper">
      <t-pull-down-refresh
        v-model="refreshing"
        :max-bar-height="100"
        :loading-texts="['下拉刷新', '松开刷新', '正在刷新', '刷新完成']"
        @refresh="onRefresh"
      >
        <div class="list-box" @scroll="onLoadList">
          <div class="tip">--此处只记录您阅读的最后20本漫画--</div>
          <div v-if="listData.length > 0" class="list">
            <div
              v-for="(item, index) in listData"
              :key="index"
              class="item-box"
              @click="onDetail(item)"
            >
              <div class="item">
                <t-image :src="item.course.titleImg" class="img" />
                <div class="pross-box">
                  <t-progress
                    :percentage="item.progress * 100"
                    :label="false"
                  />
                </div>
                <div class="name">{{ item.course.title }}</div>
                <div class="loading">{{ item.courseDetailTitle }}</div>
              </div>
            </div>
          </div>
          <div class="empt-box">
            <Empty v-if="listData.length <= 0"></Empty>
          </div>
        </div>
      </t-pull-down-refresh>
    </div>
    <t-dialog
      v-model:visible="isShowDialog"
      title="提示"
      content="确定清空阅读历史?"
      cancel-btn="取消"
      confirm-btn="确认"
      @confirm="onRemoveHistory"
      @cancel="isShowDialog = false"
    >
    </t-dialog>
  </div>
</template>
<script setup>
import { reactive, toRefs, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import comicApi from "@/api/comicApi.js";
import Empty from "@/components/Empty";
import { clearReadRecord } from "@/utils/utils";
import { Toast } from "tdesign-mobile-vue";
const router = useRouter();
const state = reactive({
  refreshing: false,
  lastTop: 0,
  listData: [],
  isShowDialog: false,
});
const { refreshing, listData, isShowDialog } = toRefs(state);
// 返回上一页
const handleBack = () => {
  router.back();
};
// 上拉加载
function onLoadList(event) {
  const scrollHeight = event.target.scrollHeight;
  const scrollTop = event.target.scrollTop;
  const clientHeight = event.target.clientHeight;
  const distanceToBottom = scrollHeight - scrollTop - clientHeight;
  if (distanceToBottom < 20 && scrollTop > state.lastTop) {
    // 分页查询
  }
  state.lastTop = scrollTop;
}
// 下拉刷新
function onRefresh() {}
// 获取列表数据
async function getList() {
  const res = await comicApi.readHistory();
  console.log("res", res);
  state.listData = res.data;
}
// 跳转漫画详情页
function onDetail(data) {
  router.push({
    name: "home",
    query: {
      courseId: data.courseId,
    },
  });
}
// 清空阅读记录
async function onRemoveHistory() {
  const res = await comicApi.delHistory();
  console.log("res", res);
  if (res.code == 0) {
    Toast("清除记录成功");
    state.listData = [];
    clearReadRecord();
  } else {
    Toast(res.msg);
  }
}
onMounted(() => {
  getList();
});
</script>
<style>
.t-dialog__content {
  background-image: none !important;
}
.t-dialog__footer {
  padding-bottom: 0 !important;
}
.t-dialog__header {
  padding-top: 10px;
}
.t-dialog__body {
  padding: 20px;
  padding-top: 10px;
}
.t-button {
  color: #333;
  height: 44px;
  line-height: 44px;
}
.t-button::after {
  border: none;
}
.t-button--primary {
  color: #101010;
  background: linear-gradient(90deg, #fdda28 0%, #f1b444 100%);
}
.t-button--primary::after {
  border: none;
}
</style>
<style lang="scss" scoped>
::deep(.t-dialog__body) {
  padding: 20px;
}
.right-txt {
  font-size: 15px;
  color: $b6c-color;
}
.warrper {
  .list-box {
    height: 100vh;
    padding-top: 50px;
    box-sizing: border-box;
    width: 100%;
    overflow: auto;
    .tip {
      font-size: 12px;
      color: $b6c-color;
      text-align: center;
    }
    .list {
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      flex-wrap: wrap;
      padding: 10px 5px;

      .item-box {
        padding: 5px;
        width: 33.3%;
        box-sizing: border-box;
        .item {
          width: 100%;
          .img {
            width: 100%;
            height: 152px;
          }
          .pross-box {
            padding: 5px 0;
            .pross-out {
              width: 100%;
              height: 4px;
              border-radius: 4px;
              background-color: $be9-color;
              .pross-in {
                height: 4px;
                border-radius: 4px;
                width: 50%;
                background-color: $b4b87ff-color;
              }
            }
          }
          .name {
            font-size: 14px;
            color: $b10-color;
            text-align: center;
          }
          .loading {
            font-size: 13px;
            color: $b986d59-color;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>
